<script setup>
/**
* & 文件引入区域
*/
import { ref } from "vue"

/**
* & 注册区
*/


/**
* & 变量声明区
*/
const title = ref("消息")

// 消息类型列表
const messageTypes = ref([
  { id: 1, icon: '/static/icons/star.png', text: '我的关注', type: 'follow' },
  { id: 2, icon: '/static/icons/dianzan.png', text: '我的点赞', type: 'like' },
  { id: 3, icon: '/static/icons/pinglun.png', text: '我的评论', type: 'comment' },
  { id: 4, icon: '/static/icons/at.png', text: '@我的', type: 'mention' }
])

// 消息列表
const messageList = ref([
  {
    id: 1,
    avatar: '/static/images/avatar.jpg',
    username: '厨- KUO',
    content: '我刚发了视频你看到了吗！',
    time: '14:51',
    unread: 5
  },
  {
    id: 2,
    avatar: '/static/images/avatar.jpg',
    username: 'COUP',
    content: '你的的视频好棒！用的什么软件？',
    time: '12:51',
    unread: 1
  },
  {
    id: 3,
    avatar: '/static/images/avatar.jpg',
    username: '大卡- DAKA',
    content: '愿来你也玩这个？ 互关一下吗？',
    time: '10:51',
    unread: 1
  },
  {
    id: 4,
    avatar: '/static/images/avatar.jpg',
    username: 'JEM',
    content: '关注你很久了，你进步好大呢！',
    time: '08:51',
    unread: 1
  }
])

/**
* & 函数区
*/
const handleTypeClick = (type) => {
  console.log('点击消息类型:', type.text)
}

const handleMessageClick = (message) => {
  console.log('点击消息:', message.username)
}

</script>

<template>
  <div class="messages-page">
    <custom-nav-bar :title="title" />

    <!-- 消息类型图标列表 -->
    <view class="message-types">
      <view 
        class="type-item" 
        v-for="type in messageTypes" 
        :key="type.id"
        @tap="handleTypeClick(type)"
      >
        <view class="icon-wrapper">
          <image :src="type.icon" mode="aspectFit" class="type-icon" />
        </view>
        <text class="type-text">{{type.text}}</text>
      </view>
    </view>

    <!-- 消息列表 -->
    <view class="message-list">
      <view 
        class="message-item" 
        v-for="message in messageList" 
        :key="message.id"
        @tap="handleMessageClick(message)"
      >
        <view class="avatar-wrapper">
          <image :src="message.avatar" mode="aspectFill" class="avatar" />
        </view>
        <view class="message-content">
          <view class="message-header">
            <text class="username">{{message.username}}</text>
            <text class="time">{{message.time}}</text>
          </view>
          <view class="message-body">
            <text class="content">{{message.content}}</text>
            <view v-if="message.unread" class="unread-badge">{{message.unread}}</view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<style lang="scss" scoped>
.messages-page {
  min-height: 100vh;
  background: #fff;
}

.message-types {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 20rpx;
  background: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #ECF3FF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.type-icon {
  width: 40rpx;
  height: 40rpx;
}

.type-text {
  font-size: 24rpx;
  color: #333;
}

.message-list {
  padding: 0 30rpx;
}

.message-item {
  display: flex;
  align-items: flex-start;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.avatar-wrapper {
  margin-right: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.username {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.message-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  font-size: 26rpx;
  color: #666;
  flex: 1;
}

.unread-badge {
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 8rpx;
  background: #FF3B30;
  border-radius: 16rpx;
  color: #fff;
  font-size: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 12rpx;
}
</style>
